<template>
  <view>
		<view
			class="nav-bar-box"
			:style="{
				height: heightConfig.navBarHeight + 'px',
				paddingTop: heightConfig.navBarPaddingTop + 'px',
				background: backgroundColor
			}"
		>
			<view class="left-box" v-if="showLeftIcon" @click="clickLeftIcon">
				<slot name="leftSlot" v-if="leftSlot"></slot>
				<u-icon v-else name="arrow-left" :color="titleColor" size="24"></u-icon>
			</view>
			<view
				:style="[
					{ textAlign: showLeftIcon ? 'center' : 'left' },
					{ fontSize: titleFontSize + 'rpx' },
					{ color: titleColor }
				]"
				class="title"
				@click="titleClick"
			>{{ title }}
			<view 
			  style="margin-left: 10rpx;transform: translateY(-3rpx);" 
				v-if="needBottom"
			><uni-icons type="bottom" size="10"></uni-icons></view>
		</view>
		</view>
  </view>
</template>

<script>
	export default {
		name: 'NavBar',
		data() {
			return {
				heightConfig: {}
			}
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			showLeftIcon: {
				type: Boolean,
				default: true
			},
			leftSlot:  {
				type: Boolean,
				default: false
			},
			titleFontSize: {
				type: [String, Number],
				default: 36
			},
			needBottom: {
				type: Boolean,
				default: false
			},
			backUrl: {
				type: String,
				default: ''
			},
			backgroundColor: {
				type: String,
				default: '#FFF'
			},
			titleColor: {
				type: String,
				default: '#333333'
			}
		},
		created() {
			this.heightConfig = this.$store.getters.heightData
			this.getTopIconDistance()
		},

		methods: {
			getTopIconDistance() {
				uni.getSystemInfo({
					success: (res) => {
						// 获取手机顶部状态栏的高度
						const statusBarHeight = res.statusBarHeight || 0

						// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
						const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
						const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2

						// 计算顶部图标距离
						const topIconDistance = statusBarHeight + navBarHeight

						this.height = topIconDistance * 2
						this.paddingTop = statusBarHeight * 2
					},
					fail: (err) => {
						console.error('获取系统信息失败:', err);
					},
				})
			},
			clickLeftIcon() {
				if (this.backUrl) {
					uni.redirectTo({
						url: this.backUrl
					})
				} else {
					uni.navigateBack()
				}
			},
			titleClick() {
				this.$emit('titleClick');
			}
		}
	}
</script>
<style lang="scss" scoped>
	.nav-bar-box {
		display: flex;
		align-items: center;
		position: relative;
		z-index: 999;
		.left-box {
			position: absolute;
			left: 0;
			display: flex;
			align-items: center;
		}
		.title {
			display: flex;
			justify-content: center;
			flex: 1;
			width: 0;
			padding: 0 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
		}
	}
</style>